<template>
	<view>
		<view class="content">
			<view class="list">
				<view class="row">
					<view class="title">昵称</view>
					<view class="right"><input placeholder="请输入" v-model="info.nickName" class="tis" /></view>
				</view>
				<view class="row">
					<view class="title">性别</view>
					<view class="right">
						<radio-group class="tis" @change="radioChange">
							<label class="radio">
								<radio style="transform:scale(0.7)" color="#007aff" value="1" :checked="info.sex == 1" />
								男
							</label>
							<label class="radio">
								<radio style="transform:scale(0.7)" color="#007aff" value="2" :checked="info.sex == 2" />
								女
							</label>
						</radio-group>
					</view>
				</view>
			</view>
			<view class="list">
				<view class="row">
					<view class="title">收货地址</view>
					<view class="right">
						<AddressPicker @change="change" :level="3">
							<text class="tis">{{ planLocate }}</text>
						</AddressPicker>
					</view>
				</view>
				<view class="row">
					<view class="title">街道</view>
					<view class="right"><input placeholder="请输入" v-model="info.address" class="tis" /></view>
				</view>
			</view>
			<view class="list">
				<view class="row">
					<view class="title">行业</view>
					<view class="right">
						<picker @change="setArchivesIndustrys" :value="industIndex" :range="industrys">
							<view class="tis">{{ industrys[industIndex] || '请选择行业' }}</view>
						</picker>
					</view>
				</view>
			</view>
			<uni-section title="等级证书" type="line">
				<view class="example-body">
					<robby-image-upload v-if="info.stuArchivesFileVos" v-model="info.stuArchivesFileVos" fileKeyName="file" :server-url="serverUrl" :form-data="formData"></robby-image-upload>
				</view>
			</uni-section>

			<view @click="save" class="savebutton">保存</view>
		</view>
	</view>
</template>

<script>
import AddressPicker from '@/components/address-picker/AddressPicker.vue';
import robbyImageUpload from '@/components/robby-image-upload/robby-image-upload.vue';
import { archivesById, updateInfo } from '@/services/user.js';
import { getCodeList } from '@/utils/dict.js';
export default {
	data() {
		return {
			serverUrl: 'https://micro.xunzhaotech.com/api/file/upload',
			industIndex: 0,
			industrys: [],
			info: {}
		};
	},
	async onLoad() {
		await this.getInfo();
		this.temiIdustrysList = await getCodeList('STU_INDUSTRY');
		this.industrys = this.temiIdustrysList.map(v => v.name);
		if (this.info.stuArchivesIndustrys && this.info.stuArchivesIndustrys.length) {
			this.industIndex = this.temiIdustrysList.findIndex(v => v.value == this.info.stuArchivesIndustrys[0].industry);
		}
	},
	computed: {
		planLocate() {
			return this.info.proviceName + this.info.cityName + this.info.areaName || '请选择地址';
		}
	},
	components: {
		robbyImageUpload,
		AddressPicker
	},
	methods: {
		deleteImg(e) {
			console.log(e);
		},
		addImage({ allImages }) {
			// console.log(e);
			const resp = JSON.parse(allImages[0]);
			this.info.stuArchivesFileVos.push(resp.data.path);
			// this.info.stu
		},
		setArchivesIndustrys({ detail: { value } }) {
			this.industIndex = value;
			this.info.stuArchivesIndustrys = [
				{
					industry: this.temiIdustrysList[value].value
				}
			];
		},
		async getInfo() {
			const resp = await archivesById();
			this.info = resp;
			this.info.stuArchivesFileVos = resp.stuArchivesFileVos.map(v => v.filePath);
		},
		change({ data: e }) {
			console.log(e);
			if (e[2]) {
				this.info.areaCode = e[2].id;
				this.info.areaName = e[2].name;
			}
			if (e[1]) {
				this.info.cityCode = e[1].id;
				this.info.cityName = e[1].name;
			}
			if (e[0]) {
				this.info.proviceName = e[0].name;
				this.info.proviceCode = e[0].id;
			}
		},
		radioChange({ detail: { value } }) {
			this.info.sex = value;
		},
		showType(tbIndex) {
			this.tabbarIndex = tbIndex;
			this.list = this.orderList[tbIndex];
		},
		async save() {
			uni.showLoading();
			await updateInfo({ ...this.info, stuArchivesFileVos: this.info.stuArchivesFileVos.map(v => ({ filePath: v })) });
			uni.hideLoading();
			uni.showToast({
				title: '保存成功',
				icon: 'none'
			});
			setTimeout(() => {
				uni.navigateBack({});
			}, 800);
		}
	}
};
</script>

<style lang="scss">
page {
	background-color: #f3f3f3;
}

.example-body {
	padding: 10px;
	padding-top: 0;
}

.radio {
	margin-right: 10rpx;
}

.icon {
	font-size: 30upx;
}

.content {
	padding-bottom: 20upx;

	.savebutton {
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: $uni-color-primary;
		color: #fff;
		border-radius: 10rpx;
		height: 80rpx;
		margin: 50rpx auto 0;
		width: 690rpx;
	}

	.list {
		width: 96%;
		padding-left: 4%;
		background-color: #fff;
		margin-bottom: 20upx;

		.row {
			widows: 100%;
			min-height: 90upx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: solid 1upx #eee;

			&:last-child {
				border-bottom: none;
			}

			.title {
				font-size: 32upx;
				color: #333;
			}

			.right {
				display: flex;
				align-items: center;
				color: #999;

				.tis {
					font-size: 32upx;
					margin-right: 5upx;
					padding-right: 50rpx;
					text-align: right;
					max-height: 120upx;

					image {
						width: 100upx;
						height: 100upx;
						border-radius: 100%;
						margin: 10upx 0;
					}
				}

				.icon {
					width: 40upx;
					color: #cecece;
				}
			}
		}
	}
}
</style>
